import React, { Component } from 'react';
import { NavBar, Empty, Button, Grid, Stepper, Space } from 'antd-mobile';
import "../../styles/Index/ShopCart.scss"
import { cart_list, cart_updatenum, cart_selectall, cart_selectone, cart_remove, cart_removeall ,addOrder} from "../../api/index";

import { SwipeCell } from 'react-vant';


import Goods from "../../components/Index/Home/Goods"

class ShopCart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            money: 0,
            right: (
                <div style={{ fontSize: 16 }} onClick={() => { this.cartremoveall() }}>
                    <Space >
                        清空
                    </Space>
                </div>
            ),
            aa: ''
        }
    }
    //清空购物车
    async cartremoveall() {
        await cart_removeall({ userid: localStorage.getItem('userid') });
        this.setState({ list: [], money: 0, aa: false })
    }
    // 组件挂载完成
    async componentDidMount() {
        var res = await cart_list({ userid: localStorage.getItem('userid') })
        // console.log(res.data.data);
        this.setState({ list: res.data.data })
        // var res2 = await user_info({ userid: localStorage.getItem('userid') })
        var res2 =  res.data.data.filter((item) => {
            return item.flag
        })
        // console.log(res2);
        var dd = 0
        res2 && res2.forEach((item) => {
            dd = dd + item.originprice * item.num
        });
        // console.log(dd);
        this.setState({ money: dd })
        //全选框状态
        var res3 =  res.data.data.every((item) => {
            return item.flag === true
        })
        // console.log(res3);
        this.setState({ aa: res3 })

    }
    // 更新商品数量
    async carNum(value, item) {
        console.log(item);
        var res = await cart_updatenum({ cartid: item.cartid, num: value })
        console.log(res);
        var res2 = await cart_list({ userid: localStorage.getItem('userid') })
        this.setState({ list: res2.data.data })
        this.money()
    }
    // 勾选
    async change(item, e) {
        // console.log(e.target.checked);
        // console.log(item);
        // console.log(item.cartid);
        var res = await cart_selectone({ cartid: item.cartid, flag: e.target.checked })
        // this.setState({ gouxuan: false })
        console.log(res);
        var res2 = await cart_list({ userid: localStorage.getItem('userid') })
        this.setState({ list: res2.data.data })
        this.money()
        var res3 = res2.data.data.every((item) => {
            return item.flag === true
        })
        console.log(res3);
        this.setState({ aa: res3 })
    }
    // 商品总价
    async money() {
        var res = await cart_list({ userid: localStorage.getItem('userid') })
        console.log(res.data.data);
        var res2 = res.data.data.filter((item) => {
            return item.flag
        })
        console.log('过滤后的',res2);
        var dd = 0
        res2.forEach((item) => {
            dd = dd + item.originprice * item.num
        });
        // console.log(dd);
        this.setState({ money: dd })

    }
    // 更新所有购物车数据的选中状态
    async all(e) {
        console.log(e.target.checked);
        var res = await cart_selectall({ userid: localStorage.getItem('userid'), type: !this.state.aa })
        console.log(res);
        var res2 = await cart_list({ userid: localStorage.getItem('userid') })
        this.setState({ list: res2.data.data })
        this.money()
        this.setState({ aa: !e.target.checked })
    }
    //删除购物车商品
    async del(item) {
        // console.log(item);
        var res = await cart_remove({ cartid: item.cartid })
        console.log(res);
        var res2 = await cart_list({ userid: localStorage.getItem('userid') })
        // console.log(res.data.data);
        this.setState({ list: res2.data.data }, () => {
            if (!this.state.list) {
                this.setState({ money: 0 })
            } else {
                this.money()
            }
        })
    }

    //结算
    async jiesuan(){
        let res = await addOrder({ userid: localStorage.getItem('userid') })
        console.log('订单',res.data);
        localStorage.setItem('time',res.data.time)
        this.props.history.push('/querendingdan')
    }

    render() {
        return (
            <div className='shopCart'>
                <NavBar className='header' right={this.state.right} onBack={() => { this.props.history.go(-1) }}>购物车</NavBar>
                {
                    !this.state.list ?
                        <div className="empty">
                            <Empty
                                style={{ padding: '64px 0' }}
                                imageStyle={{ width: 128 }}
                                description='购物车空空如也'
                            />
                            <Button shape='rounded' color='danger' onClick={() => { this.props.history.push('/index/cate') }}>
                                立即购物
                            </Button>

                        </div>
                        :
                        <div className="cartlist">
                            {
                                this.state.list && this.state.list.map((item, index) => {
                                    return (
                                        <SwipeCell key={index}
                                            rightAction={
                                                <div className='delcar' type="danger" onClick={() => { this.del(item); }}>删除</div>
                                            }
                                        >
                                            <div className="car_list_item" key={index}>
                                                <input type="checkbox" checked={this.state.list[index].flag} onChange={(e) => { this.change(item, e) }} />
                                                <div className="tu3"><img src={item.img1} alt="" /></div>
                                                <div className="wenzi3">
                                                    <p className='p1'>{item.proname}</p>
                                                    <p className='p3'>￥{item.originprice}</p>
                                                </div>
                                                <div className="num3">
                                                    <div className='del' onClick={() => { this.del(item) }}>×</div>
                                                    <Stepper
                                                        defaultValue={item.num} min={1} max={99} style={{
                                                            '--border-inner': 'none',
                                                            '--height': '24px',
                                                            '--input-width': '20px',
                                                            '--border-radius': '20px',
                                                            '--input-font-size': '12px',
                                                            '--button-font-size': '12px',
                                                            '--button-text-color': 'black'
                                                        }}
                                                        onChange={(value) => this.carNum(value, item)}
                                                    />
                                                </div>
                                            </div>
                                        </SwipeCell>
                                    )
                                })
                            }
                        </div>
                }
                <p>猜你喜欢</p>
                <Goods />
                <div className="car_bottom">
                    <Grid columns={10} gap={8}>
                        <Grid.Item span={2}>
                            <div className='d31'>
                                <input type="checkbox" checked={this.state.aa} onChange={(e) => { this.all(e) }} />全选
                            </div>
                        </Grid.Item>
                        <Grid.Item span={5}>
                            <div className='d32'>总计￥:{this.state.money}</div>
                        </Grid.Item>
                        <Grid.Item span={3}>
                            <div className='d33' onClick={()=>{this.jiesuan()}}>去结算</div>
                        </Grid.Item>
                    </Grid>
                </div>
            </div>
        );
    }
}

export default ShopCart;